import {
  Image,
  Pressable,
  StyleProp,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';
import * as React from 'react';
import { useNavigation } from '@react-navigation/native';
import { User } from '../../shared/interfaces/user.interface';
import { RootStackNavigationProp } from '../../types';

interface LiveCardProps {
  title: string;
  image: string;
  time: string;
  trainer: User;
  style?: StyleProp<ViewStyle>;
}

export default function LiveCard(props: LiveCardProps) {
  const { title, time, trainer, style } = props;
  const navigation = useNavigation<RootStackNavigationProp<'LiveCourse'>>();
  const openCourse = () => {
    navigation.navigate('LiveCourse');
  };

  return (
    <Pressable onPress={openCourse}>
      <View style={[styles.container, style]}>
        <View style={styles.background}>
          <Image style={styles.bgImage} source={{ uri: trainer.largeAvatar }} />
          <Text style={styles.trainerName}>{trainer.name}教练</Text>
        </View>
        <Text style={styles.title}>{title}</Text>
        <View style={styles.subTitle}>
          <Text style={styles.subTitleText}>K1零基础</Text>
          <Text style={styles.subTitleText}>·</Text>
          <Text style={styles.subTitleText}>{time} 分钟</Text>
        </View>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 130,
    width: 150,
  },
  trainerName: {
    position: 'absolute',
    left: 8,
    bottom: 6,
    fontSize: 14,
    color: '#fff',
    textShadowColor: '#555',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 1,
  },
  background: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 36,
    backgroundColor: 'lightblue',
    borderRadius: 12,
    overflow: 'hidden',
  },
  bgImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  title: {
    fontSize: 14,
    position: 'absolute',
    bottom: 16,
    left: 0,
    fontWeight: '500',
  },
  subTitle: {
    flexDirection: 'row',
    position: 'absolute',
    bottom: 0,
    left: 0,
  },
  subTitleText: {
    fontSize: 12,
    marginRight: 6,
  },
});
